<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>会员</title>
	<link rel="stylesheet" href="../css/mui.min.css">
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		body {
			background: #fff;
		}
		.map_rest{
			display: none!important;
		}
		.member_top {
			width: 100%;
			height: 200px;
			background: url("../images/member_bg.png") no-repeat center bottom;
			background-size: cover;
			padding: 20px 10px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
		}

		.login_box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.login_left{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.lb_left {
			margin-right: 10px;
			width: 70px;
			height: 70px;
			border-radius: 50%;
			overflow: hidden;
		}
		.lb_left img{
			width: 100%;
			height: 100%;
		}
		.lb_right {
			padding: 0!important;
			margin: 0!important;
			display: flex;
			flex-direction: column;
			justify-content:space-between;
			align-items: flex-start;
			color: #fff;
		}

		.lb_right h2 {
			font-size: 18px;
			color: #fff;
		}

		.lb_right h3 {
			font-size: 14px;
			color: #fff;
		}

		.lb_right p {
			font-size: 10px;
			color: #fff;
			padding: 0!important;
			margin: 0!important;
		}

		.lb_seting {
			float: right;
		}

		.lb_seting span {
			color: #fff;
			width: 72px;
			height: 28px;
			line-height: 28px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #fff;
			border-radius: 20px;
		}

		.lb_seting span img {
			width: 25%;
			display: inline-block;
			vertical-align: middle;

		}

		/* 平台服务 */

		.serve_pt {
			margin-top: -20px;
			padding: 20px;
			background: #fff;
			border-radius: 10px 10px 0 0;
		}

		.serve_pt .title {
			padding-bottom: 20px;
		}

		.serve_pt .title h2 {
			font-size: 18px;
			color: #333;
		}

		.serve_pt ul li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50px;
			line-height: 50px;
			font-size: 14px;
			color: #666;
			border-bottom: 1px solid #eee;
		}
		.serve_pt ul li .txt{
			display: flex;
			align-items: center;
		}
		.serve_pt ul li .txt img {
			margin-right: 10px;
			width:20px;
		}
		.login_button{
			margin-top: 20px;
			text-align: center;
		}
		.login_button button{
			text-align: center;
			width: 220px;
			height: 44px;
			font-size: 18px;
			color: #ccc;
			background: #eee;
			border-radius: 10px;
		}
		[v-cloak] {
				display: none;
			}
	</style>
</head>

<body>
	<div id="app" class="app_a">
		<div class="member_top" v-cloak>
			<div class="login_box">
				<div class="login_left">
					<div class="lb_left">
						<img :src="admin_logo" alt="头像">
					</div>
					<div class="lb_right" v-if="member_login">
						<h3>{{admin_name}}</h3>
					</div>
					<div class="lb_right" v-else>
						<h2 @click="login_enter">请点击此处登录</h2>
						<p>登录后体验更多新鲜功能</p>
					</div>
				</div>

				<div class="lb_seting" v-if="member_set">
					<span @click="open_set"><img src="../images/set2.png" alt="设置"></span>
				</div>
			</div>
		</div>
		<div class="serve_pt"  v-cloak>
			<div class="title">
				<h2>平台服务</h2>
			</div>
			<ul>
				<li @click="Enter_proposal">
					<span class="txt"><img src="../images/li_bg1.png" alt="建议反馈">建议反馈</span>
					<span><img src="../images/right_enter.png" alt="进入"></span>
				</li>
				<li @click="Open_telnumber">
					<span class="txt"><img src="../images/li_bg2.png" alt="联系客服">联系客服</span>
					<span>{{Tel_number}}</span>
				</li>
				<li @click="Enter_us">
					<span class="txt"><img src="../images/li_bg3.png" alt="关于我们">关于我们</span>
					<span><img src="../images/right_enter.png" alt="进入"></span>
				</li>
			</ul>
		</div>
		<div class="login_button" v-if="member_login"  v-cloak>
			<button type="button" class="mui-btn mui-btn-outlined" @click="out_login">退出登录</button>
		</div>
	</div>
	<script src="../js/vue.min.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/vue-resource.js"></script>
	<script src="../js/base.js"></script>
	<script>
		mui.init({
		  pullRefresh : {
			container:".app_a",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			down : {
			  style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			  color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
			  height:'50px',//可选,默认50px.下拉刷新控件的高度,
			  range:'100px', //可选 默认100px,控件可下拉拖拽的范围
			  offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
			  auto: false,//可选,默认false.首次加载自动上拉刷新一次
			  callback :function(){
				  window.location.reload();
				  
			  } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			}
		  }
		});
	mui.plusReady(function () {
		var app = new Vue({
			el: "#app",
			data: {
				ID_number:null,//保存本地存储中的id
				member_login: false,//是否登录
				admin_name: "",//用户名
				admin_logo: "../images/tx.jpg",
				member_set: false,
				Tel_number:"0313-5880012",
				object:{},//传输 用的对象
			},
			methods: {
				onclick_dj() {
					window.history.go(-1);
				},
				login_enter(){//点击登录
					plus.webview.open('login/login_index.html', 'login_index.html', {}, 'slide-in-right', 200);
				},
				open_set(){
					BASE.Custom_window('member/set_member.html', 'set_member');
				},
				out_login(){
					//清楚缓存
					plus.storage.clear();
					window.location.reload();
				},
				Enter_us(){//关于我们进入口
					plus.webview.open('member/about_us.html', 'about_us', {}, 'slide-in-right', 200);
				},
				Enter_proposal(){//建议反馈点击进入
					plus.webview.open('member/proposal.html', 'proposal', {}, 'slide-in-right', 200);
				},
				Open_telnumber(){//点击拨打电话
					plus.device.dial(this.Tel_number,true);
				},
				getData(){
					var _this=this;
					HTTP.post(this, 'sysUserController/querySysUser', function(res) {
						_this.object=res.data;
						if(_this.object.userNick){
							_this.admin_name=_this.object.userNick;
						}
						else{
							_this.admin_name=_this.object.userPhone;
						}
					
						_this.admin_logo=_this.object.userPicture;//默认照片--只是显示功能!
							
					}, function(res) {
						// mui.toast(res);
					}, {
						sourceType:"2",
						userId:_this.ID_number
					})	
				}
			},
			created() {
				//接受userid!
				this.ID_number=plus.storage.getItem('_id');
				// 这个_name 是当时注册的时候保存的手机号
				var Name=plus.storage.getItem('_name');
				
				// console.log(this.ID_number)
				
				if(this.ID_number){
					this.member_set=true;
					this.member_login=true;
				}
				else{
					this.member_set=false;
					this.member_login=false
				}
				this.getData();
			}
			
			
		})
		document.addEventListener('member-reload', function() {
			window.location.reload();
		})
	})
	</script>
</body>

</html>